<template>
<div style="height:100%">
   <div>
       <el-button   type="primary" @click="addlead" style="    position: relative;
    float: right;
    top: 8px;
    margin-right:20px">添加自有客户线索</el-button>    
    </div> 
  <div class="buttonarea">
    <!-- <el-radio-group v-model="radio" style="margin:12px">
    <el-radio :label="2">企业</el-radio>
    <el-radio :label="1">个人</el-radio>
  </el-radio-group> -->
   <el-select v-model="typevalue" slot="prepend"  style="margin-left:20px" @change="gosearch">
     <el-option label="请选择客户类型" value="0"></el-option>
    <el-option label="企业" value="2"></el-option>
    <el-option label="个人" value="1"></el-option>
    <el-option label="其他机构" value="3"></el-option>
  </el-select>
  <el-select v-model="state" slot="prepend" placeholder="">
        <el-option label="请选择跟进状态" value="0"></el-option>

    <el-option label="新客户" value="1"></el-option>
    <el-option label="沟通中" value="2"></el-option>
    <el-option label="有意向" value="3"></el-option>
    <el-option label="成交几率高" value="4"></el-option>
    <el-option label="即将购买" value="5"></el-option>
    <el-option label="完成购买" value="6"></el-option>
    <el-option label="无意向" value="7"></el-option>
    <el-option label="已停止服务" value="8"></el-option>
  </el-select>
  <el-input placeholder="请输入内容" v-model="input5" class="input-with-select" style="margin:12px;width:700px">
    <el-select v-model="select" slot="prepend" placeholder="请选择">
      <el-option label="请选择" value="0"></el-option>

      <el-option label="客户名称" value="1"></el-option>
      <el-option label="公司名称" value="3"></el-option>
      <el-option label="电话" value="2"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search"  @click="gosearch"></el-button>
        <!-- <el-button slot="append"   @click="reset">重置</el-button> -->

  </el-input>
     
 <!-- <el-button type="primary" @click="addcustomer">新建客户</el-button>      -->

  </div>

  <div >
     
  <el-table
     @sort-change="sorttab"
    :data="tableData"
    style="width: 100%"
    max-height="600">
   
 

  <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <!-- <el-form-item label="联系电话">
            <span>{{ props.row.phone }}</span>
          </el-form-item> -->
                  <el-form-item  label="需求说明" style="width:80%;">
            <span>{{ props.row.comment }}</span>
          </el-form-item>
          <el-form-item   v-if="props.row.manname"  label="联系人1">
            <span>{{ props.row.manname }}</span>
          </el-form-item>
           <el-form-item   v-if="props.row.phone"   label="电话">
            <span>{{ props.row.phone}}</span>
          </el-form-item>
          <el-form-item   v-if="props.row.work"   label="职位">
            <span>{{ props.row.work }}</span>
          </el-form-item>
          <el-form-item   v-if="props.row.weixinhao"   label="微信号">
            <span>{{ props.row.weixinhao }}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.manname2"  label="联系人2">
            <span>{{ props.row.manname2 }}</span>
          </el-form-item>
           <el-form-item   v-if="props.row.phone2"  label="电话">
            <span>{{ props.row.phone2}}</span>
          </el-form-item>
          <el-form-item   v-if="props.row.work2"  label="职位">
            <span>{{ props.row.work2 }}</span>
          </el-form-item>
          <el-form-item   v-if="props.row.weixinhao2"  label="微信号">
            <span>{{ props.row.weixinhao2 }}</span>
          </el-form-item>
          <el-form-item v-if="props.row.manname3" label="联系人3">
            <span>{{ props.row.manname3 }}</span>
          </el-form-item>
           <el-form-item  v-if="props.row.phone3"  label="电话">
            <span>{{ props.row.phone3}}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.work3"  label="职位">
            <span>{{ props.row.work3 }}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.weixinhao3"  label="微信号">
            <span>{{ props.row.weixinhao3 }}</span>
          </el-form-item>

            <el-form-item v-if="props.row.customertype!=1&&props.row.hangye" label="企业所属行业">
            <span>{{ props.row.hangye }}</span>
          </el-form-item>
           <el-form-item   v-if="props.row.customertype!=1&&props.row.yewu" label="企业主营业务">
            <span>{{ props.row.yewu}}</span>
          </el-form-item>
          <el-form-item v-if="props.row.customertype!=1&&props.row.guimo"  label="规模">
            <span>{{ props.row.guimo}}</span>
          </el-form-item>
          <el-form-item v-if="props.row.customertype!=1&&props.row.website"  label="企业官网">
            <span>{{ props.row.website }}</span>
          </el-form-item>
          <el-form-item v-if="props.row.customertype!=1&&props.row.gzh"  label="企业公众号">
            <span>{{ props.row.gzh }}</span>
          </el-form-item>

          <el-form-item v-if="props.row.username" label="客户名称">
            <span>{{ props.row.username }}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.addr"  label="所在地区">
            <span>{{ props.row.addr }}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.addr2"  label="联系地址">
            <span>{{ props.row.addr2 }}</span>
          </el-form-item>
           <el-form-item  label="线索来源">
            <span>{{ props.row.type==1?'抢单':'自有'}}</span>
          </el-form-item>  
          <el-form-item v-if="props.row.sourceuser.username" label="线索人姓名">
            <span>{{props.row.sourceuser.username}}</span>
          </el-form-item> 
          <el-form-item v-if="props.row.sourceuser.phone" label="线索人电话">
            <span>{{props.row.sourceuser.phone}}</span>
          </el-form-item> 
          <el-form-item label="创建时间">
            <span>{{ getNowFormatDate(props.row.created) }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>

  <el-table-column
    fixed
     align="center"
      label="线索编号"
     >
       <template slot-scope="scope">
         {{scope.row.type==1?scope.row.id:'L'+scope.row.id}}
       </template>
    </el-table-column>
    <el-table-column
    fixed
    sortable="custom"
     align="center"
      label="联系人"
      prop="manname">
    </el-table-column>
    <el-table-column
    fixed
     align="center"
         sortable="custom"
      label="联系电话"
      prop="phone">
    </el-table-column>
    <el-table-column
    fixed
     align="center"
         sortable="custom"
      label="客户名称"
      prop="username">
    </el-table-column>
    <el-table-column
    fixed
     align="center"
         sortable="custom"
         prop="status"
      label="跟进状态"
     >
        <template slot-scope="scope">
          {{convert(scope.row.status)}}
        </template>
    </el-table-column>
     <el-table-column
    fixed
     align="center"
         sortable="custom"
         prop="type"
      label="线索来源"
     >
        <template slot-scope="scope">
          {{ scope.row.type==1?'抢单':'自建' }}
        </template>
    </el-table-column>
          <el-table-column
    fixed
     align="center"
      label="接单时间"
          sortable="custom"
          :formatter="getNowFormatDate2"
      prop="created">

    </el-table-column>
      <el-table-column
    fixed
     align="center"
         sortable="custom"
      label="最近更新时间"
       :formatter="getNowFormatDate2"
      prop="updated">
    </el-table-column>
    <el-table-column
    fixed
     align="center"
      label="操作">
      <template slot-scope="scope">
        <!-- <el-button @click="handleClickread(scope.row)" type="text" size="small">查看</el-button> -->
         <el-button @click="handleClick(scope.row.id,scope.row.index)" type="text" size="small" v-if="scope.row.type === 1&&scope.row.status!=8">解锁</el-button>
        <el-button @click="genjin(scope.row)" type="text" size="small" v-if="scope.row.status!=8">跟进记录</el-button>
        <el-button type="text" size="small" @click="toadd">购买保险</el-button>
        <!-- <el-button type="text" @click="stopmember(scope.row.id,scope.row.index)" v-if="scope.row.status!=3&&scope.row.status!=4" size="small">停止服务</el-button> -->
      </template>
    </el-table-column>
  </el-table>
  
 <div class="block">
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="10"
      background
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div> 
  </div>
  </div>
</template>

<script>
import { getmembers,unlockmember,stopmember } from '@/api/policy'


export default {
  name: 'leadgenjin',
  components: { },
    computed: {
  },
  data() {
    return {
      page:1,
      status:'',
      total:0,
      input5:'',
      select:'0',

      typevalue:'0',
      state:'0',
      searchtag:"0",
    tableData: [ ],


    }
      
  },
  components:{


  },
  mounted(){
this.getmembers();

  },
  methods:{
        sorttab(col,prop,order){
          console.log( col)
          if(col.prop)
          {
          this.sortname=col.prop;
          this.sortorder=col.order;
            this.page=1;
    this.total=0;
    // this.searchtag=0;
    this.getmembers();
          }
         
    },
     addlead(){
    this.$router.push("addleadofself")
  },
    gosearch()
    {
    this.page=1;
    this.total=0;
    this.searchtag=1;
    this.getmembers();



    },
      reset()
    {
    this.page=1;
    this.total=0;
    this.searchtag=0;
    this.getmembers();



    },
    getNowFormatDate2(obj) {
      var dt=obj.created;
        var date = new Date(dt);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },
         getNowFormatDate(dt) {
        var date = new Date(dt);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },
      getmembers(){

this.$loadingshow();
       getmembers({ page:this.page,searchtag:this.searchtag,size:10,customertype:this.typevalue,key:this.select,keyword:this.input5,key2:this.state,sortname:this.sortname,sortorder:this.sortorder }).then(res => {
              this.$loadingclose();
       if (res.code == 200) {
              this.tableData=res.result.list;
              this.total=res.result.total;
              for(var i=0;i<this.tableData.length;i++)
              {
                   this.tableData[i].index=i;
                   this.tableData[i].typedesc=this.tableData[i].type==1?'重点':'普通'
                   

              }
           //   document.getElementsByClassName('el-table__body-wrapper')[0].style.height='auto';
        } 
        else{
          this.$toast(res.message)
        }
      });
    },
    addcustomer(){
      this.$router.push('addcustomer');
    },
    genjin(row){
      this.$router.push('genjin?id='+row.id+'&name='+row.username);
    },
    toadd(value){
    // this.$router.push('addpolicy');
    window.open('http://chudan.zhiyuewulian.com');
    },
    filterTag(){

    },
handleSizeChange(){

},
convert(status)
{
     if(status==1)
               {
status= '新客户';

               }
               if(status==2)
               {
status= '沟通中';

               }
                         if(status==3)
               {
status= '有意向';

               }
              if(status==4)
               {
status= '成交几率高';

               }
                         if(status==5)
               {
status= '即将购买';

               }
                         if(status==6)
               {
status= '完成购买';

               }
                         if(status==7)
               {
status= '无意向';

               }
                          if(status==8)
               {
status= '已解锁';

               }
               return status;
},
handleCurrentChange(){
     this.getmembers();
},
handleClick(id,index) {
        //this.$router.push('chakan');
        this.$loadingshow();
       unlockmember({id:id }).then(res => {
           this.$loadingclose();
        if (res.code == 200) {
          this.tableData[index].status=8;
          this.$toast('解锁成功')
        } 
        else{
          this.$toast(res.message)
        }
      });
      },
      handleClickread(row) {
        this.$router.push('chakan?id='+row.id);
      },
      stopmember(id,index){

       this.$loadingshow();
       stopmember({id:id }).then(res => {
           this.$loadingclose();
        if (res.code == 200) {
          this.tableData[index].status=3;
          this.$toast('停止成功')
        } 
        else{
          this.$toast(res.message)
        }
      });


      }
  }
}
</script>

<style lang="scss" scoped>
.buttonarea{
  width:90%;
  margin-top: 20px;
  // height: 50px;
}
.btn{
  position: relative;
    /* left: 73%; */
    float: right;
    right: 9px;
    margin-top: 6px;
}
.block{
      text-align: center;
      margin-top:10px;
}

.documentation-container {
  // margin: 50px;
  .document-btn {
    float: left;
    margin-left: 50px;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    width: 200px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
   .popstyle{
        width: 100%;
        height: 30%;
    }
    .userfile{
    width: 90px;
    height: 30px;
    background: cornflowerblue;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
}
/deep/  .el-input--suffix .el-input__inner{
  width:150px;
}
/deep/ .el-form-item{
  width: 20%;
}
</style>
